<template>
    <div class="park-detail">

        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
            <el-breadcrumb-item :to="{ path: '/dormitory/baseinfo/dormitory-park' }">园区</el-breadcrumb-item>
            <el-breadcrumb-item>园区详情</el-breadcrumb-item>
        </el-breadcrumb>

        <el-descriptions title="园区详情信息" direction="vertical" :column="4" border>
            <el-descriptions-item label="园区名">{{ parkInfo.name | filterParkName }}</el-descriptions-item>
            <el-descriptions-item label="所属校区Id">{{ parkInfo.campusId }}</el-descriptions-item>
            <el-descriptions-item label="园区Id">{{ parkInfo.id }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ parkInfo.createTime }}</el-descriptions-item>
            <el-descriptions-item label="所属宿舍楼数量">{{ parkInfo.buildingList | filteBuilding }}</el-descriptions-item>
        </el-descriptions>
        <h5>园区所属宿舍楼</h5>
        <!-- 宿舍楼table-->
        <el-row :gutter="10" class="mb8" style="margin-top: 20px;">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="handleDelete">删除</el-button>
            </el-col>
        </el-row>

        <!-- cards -->
        <el-row>
            <el-col :span="4" v-for="(o, index) in buildingList" :key="index" style="margin: 20px 50px 20px 0px;" >
                <el-card :body-style="{ padding: '0px', position: 'relative', cursor: 'pointer' }" shadow="hover" @click.native="toBuilding(o.id)">
                    <el-image class="image" :src="'http://localhost:8080/dev-api' + o.image" fit="cover"></el-image>
                    <div style="padding: 14px">
                        <span>宿舍楼：{{ o.name }}</span>
                        <div class="bottom clearfix">
                            <time class="time">住宿性别：{{ o.gender }}</time>
                            <el-button type="text" class="button"><el-dropdown @command="handleCommand"
                                    :hide-on-click="false">
                                    <i class="el-icon-more"></i>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item icon="el-icon-edit" :command="o">修改</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-delete" :command="o.id">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 添加或修改宿舍楼对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入宿舍楼名称" />
                </el-form-item>
                <el-form-item label="园区名称">
                    <el-input :value="parkInfo.name" disabled placeholder="请输入宿舍楼名称" />
                </el-form-item>
                <el-form-item label="单元前缀" prop="prefix">
                    <el-input v-model="form.prefix" placeholder="请输入单元前缀" />
                </el-form-item>
                <el-form-item label="单元数" prop="unitNumber">
                    <el-input v-model.number="form.unitNumber" placeholder="请输入单元数" />
                </el-form-item>
                <el-form-item label="楼层数" prop="floorNumber">
                    <el-input v-model.number="form.floorNumber" placeholder="请输入楼层数" />
                </el-form-item>
                <el-form-item label="负责人" prop="manager">
                    <el-input v-model="form.manager" placeholder="请输入负责人" />
                </el-form-item>
                <el-form-item label="负责人电话" prop="managerPhone">
                    <el-input v-model="form.managerPhone" placeholder="请输入负责人电话" />
                </el-form-item>
                <el-form-item label="住宿性别" prop="gender">
                    <el-input v-model.number="form.gender" placeholder="请输入住宿性别" />
                </el-form-item>
                <el-form-item label="宿舍楼图片路径" prop="image">
                    <image-upload v-model="form.image" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listPark, getPark, delPark, addPark, updatePark } from "@/api/dormitory/basedata/park";
import { listBuilding, getBuilding, delBuilding, addBuilding, updateBuilding } from "@/api/dormitory/basedata/building";

export default {
    name: 'SRSUiParkDetailView',

    data() {
        return {
            parkInfo: [],
            // 表单参数
            form: {
                parkId: this.$route.query.parkId
            },
            // 非多个禁用
            multiple: true,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                parkId: this.$route.query.parkId,
            },
            buildingList: []
        };
    },

    mounted() {
        this.getParkInfo()
        this.getList()
    },

    methods: {
        /** 查询宿舍楼列表 */
        getList() {
            this.loading = true;
            listBuilding(this.queryParams).then(response => {
                this.buildingList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        getParkInfo() {
            getPark(this.$route.query.parkId).then(res => {
                console.log(res);
                this.parkInfo = res.data
            })
        },
        // to building detail page
        toBuilding(buildingId) {
            this.$router.push({ path: '/dormitory/baseinfo/buildingdetail', query: { buildingId } })
        },
        handleCommand(command) {
            if (command instanceof Object) return this.handleUpdate(command)
            this.handleDelete(command)
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加宿舍楼";
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateBuilding(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addBuilding(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            let ids = [row]
            if (!row) ids = this.ids
            this.$modal.confirm('是否确认删除宿舍楼编号为"' + ids + '"的数据项？').then(function () {
                return delBuilding(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        // 表单重置
        reset() {
            this.form = {
                name: null,
                parkId: this.$route.query.parkId,
                manager: null,
                managerPhone: null,
                image: null,
                remark: null,
                delFlag: null,
                bedCharge: null,
                bedCount: null,
                status: null,
            };
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getBuilding(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改宿舍楼";
            });
        },

    },
    filters: {
        filteBuilding(value) {
            if (!value) return
            return `${value.length}栋`
        },
        filterParkName(value) {
            if (value == 'default') return "默认园区"
            return value
        }
    }
};
</script>

<style lang="scss" scoped>
.park-detail {
    padding: 20px;
}

.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    height: 200px;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>